<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: gonghairun
 * @LastEditTime: 2021-02-25 15:33:53
 * @Description: //描述
-->
<template>
    <div class="detailPage">
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item :label="item.label" :prop="item.prop" v-for="(item,index) in formList" :key="index">
                <el-select @change="schemasChange($event,item.prop)" filterable v-if="index == 0" v-model="formData[item.prop]" :placeholder="item.label" size="mini" :clearable="true" style="width:100%;">
                    <el-option v-for="(item,index) in schemasList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                <el-select @change="schemasTableChange($event,item.prop)" filterable v-else-if="index == 1" v-model="formData[item.prop]" :placeholder="item.label" size="mini" :clearable="true" style="width:100%;">
                    <el-option v-for="(item,index) in schemasTableList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                <el-select @change="schemasTableKeyChange($event,item.prop,index)" filterable v-else v-model="formData[item.prop]" :placeholder="item.label" size="mini" :clearable="true" style="width:100%;">
                    <el-option v-for="(item,index) in schemasTableKeyList" :key="index" :label="item.label" :value="item.value" :disabled="valueList.includes(item.value) ? true : false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="dialogBtn">
                    <el-button type="primary" size="mini" @click="submitForm('ruleForm')">确认</el-button>
                    <el-button size="mini" @click="goBack()">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "detailPage",
    props:{
        // form表单数据
        ruleForm:{
            type:Object
        },
        // 点击返回
        goBackClick:{
            type:Function
        },
        // form动态数据
        formList:{
            type:Array
        },
        // 表单校验
        rules:{
            type:Object
        },
        submit:{
            type:Function
        },
        schemasChangeIndex:{
            type:Function
        },
        schemasTableChangeIndex:{
            type:Function
        }
    },
    components: {
    },
    data() {
        return {
            schemasList:[],
            schemasTableList:[],
            schemasTableKeyList:[],
            schemasValue: '',
            schemasTableValue: '',
            valueList:[],
            formData:this.ruleForm
        };
    },
    created() {
        Object.keys(this.formData).map((key,index) => {
            if (index > 1) {
                this.valueList.push('')
            }
        })
        this.$nextTick(() => {
            this.$refs.ruleForm.clearValidate();
        })
    },
    activated() {
    },
    watch: {
    },
    mounted() {
        this.getschemasData()
    },
    methods: {
        /**
         * @Author: gonghairun
         * @description: 修改数据库
         * @param {*}
         * @return {*}
         */
        schemasChange(value,prop) {
            this.schemasValue = value
            this.schemasChangeIndex()
            this.schemasTableKeyList = []
            this.getschemasTableData()
        },
        /**
         * @Author: gonghairun
         * @description: 修改数据库-表
         * @param {*}
         * @return {*}
         */
        schemasTableChange(value,prop) {
            this.schemasTableValue = value
            this.$set(this.formData,prop,value)
            console.log(this.formData)
            this.schemasTableChangeIndex()
            this.getschemasTableKeyData()
        },
        /**
         * @Author: gonghairun
         * @description: 修改数据库-表-字段
         * @param {*} value
         * @param {*} prop
         * @return {*}
         */
        schemasTableKeyChange(value,prop,index) {
            this.formData[prop] = value
            this.valueList[index-2] = value
        },
        /**
         * @Author: gonghairun
         * @description: 点击返回
         * @param {*}
         * @return {*}
         */
        goBack() {
            this.goBackClick()
        },
        /**
         * @Author: gonghairun
         * @description: 点击确认
         * @param {*} form
         * @return {*}
         */
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.submit(this.formData)
                } else {
                    return false
                }
            });
        },
        /**
         * @Author: gonghairun
         * @description: 获取数据库
         * @param {*}
         * @return {*}
         */
        getschemasData() {
            const _this = this
            _this.$http.get(`/psys-import-service/api/external/excelimport/${_this.$version}/listschemas`).then(res => {
                let data = res.data.data
                _this.schemasList = data
            })
        },
        /**
         * @Author: gonghairun
         * @description: 获取数据库-表
         * @param {*}
         * @return {*}
         */
        getschemasTableData() {
            const _this = this
            _this.$http.get(`/psys-import-service/api/external/excelimport/${_this.$version}/listtables?schema=${_this.schemasValue}`).then(res => {
                let data = res.data.data
                let dataList = []
                data.map((item)=>{
                    dataList.push(item.tableName)
                })
                _this.schemasTableList = dataList
            })
        },
        /**
         * @Author: gonghairun
         * @description: 获取数据库-表-字段
         * @param {*}
         * @return {*}
         */
        getschemasTableKeyData() {
            const _this = this
            _this.$http.get(`/psys-import-service/api/external/excelimport/${_this.$version}/listcolumns?schema=${_this.schemasValue}&table=${_this.schemasTableValue}`).then(res => {
                let data = res.data.data
                let dataList = []
                data.map((item)=>{
                    item.isNullable = item.isNullable == 'NO' ? '否' : '是'
                    dataList.push({
                        value:item.columnName,
                        label:'值:'+item.columnName+'，是否必填:' + item.isNullable + '，类型:' + item.dataType + '，注释:'+item.columnComment
                    })
                })
                _this.schemasTableKeyList = dataList
            })
        }
    }
};
</script>

<style lang="less" scoped>
@import "../index.less";
</style>
